.background-on{
    background-color: white;
}
.background-off{
    background-color: #3f3f3d;
    color:black;
}
.toggle{
    display: flex;
    justify-content: flex-end;
    width:80px;
    height:40px;
    background-color: grey;
    border-radius: 100px;
    cursor: pointer;
    margin-right: 20px;
}
.toggle-on{
    justify-content: flex-start;
    background-color: white;
}
.toggle-ball{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:5px;
    width:30px;
    height:30px;
    background-color: white;
    border-radius: 100%;
}
#sun{
    width:20px;
    height: 20px;
    display: none;
}
#moon{
    width:20px;
    height:20px;
}
.toggle-ball-on{
    background-color: rgb(215, 209, 209);
    animation:toggle-on 0.8s ease-in-out;
}
.toggle-ball-off{
    animation:toggle-off 0.8s ease-in-out;
}
@keyframes toggle-off{
    from{
        transform: translateX(-40px) rotate(360deg);
    }
}
@keyframes toggle-on{
    from{
        transform: translateX(40px) rotate(360deg);
    }
}